import React, { Component } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import _ from 'lodash';
import Canvas from 'react-native-canvas';
import ChartInfo from './chartInfo';
import styles from './style';

// 角度转弧度
export const getRads = degrees => (Math.PI * degrees) / 180;

// 弧度转角度
export const getDegrees = rads => (rads * 180) / Math.PI;

const INTERVAL = 2000,
  COLORS = ['#ff3399', '#3399ff', '#47d147'],
  BG_COLOR = '#ccc',
  SPACE = 4,
  LINE_WIDTH = 20,
  CANVAS_SIZE = 196;

export default class Circle extends Component {
  render() {
    const {
      canvasSize = CANVAS_SIZE,
      data = [],
      lineWidth = LINE_WIDTH,
      space = SPACE,
      bgColor = BG_COLOR,
      colors = COLORS
    } = this.props;

    const rates = _.map(data, ({ percentageRanking }) => percentageRanking);
    const c = Math.floor(canvasSize / 2);
    const r = Math.floor(c - lineWidth / 2);
    const handleCanvasBg = canvas => {
      if (!canvas) {
        return;
      }
      const ctx = canvas.getContext('2d');
      canvas.height = canvasSize;
      canvas.width = canvasSize;
      ctx.strokeStyle = bgColor;
      ctx.lineWidth = lineWidth;
      for (let i = 0; i < rates.length; i++) {
        const _r = r - i * (lineWidth + space);
        if (i !== 0) ctx.moveTo(c + _r, c);
        ctx.arc(c, c, _r, 0, getRads(360));
        ctx.stroke();
      }
    };
    const dataArc = canvas => {
      if (!canvas) {
        return;
      }
      const ctx = canvas.getContext('2d');
      canvas.height = canvasSize;
      canvas.width = canvasSize;
      rates.forEach((rate, i) => {
        ctx.save(); // 保存初始状态, 后文每次绘制一组弧线后后回溯到此
        ctx.translate(c, c); // 转换坐标系到圆心位置
        const startPoint = getRads(-90);
        const endPoint = getRads(360 * rate - 90);
        const _r = r - i * (lineWidth + space);
        ctx.fillStyle = colors[i];

        ctx.beginPath(); // 开始绘制起始点
        ctx.lineWidth = 0;
        ctx.arc(0, _r * -1, lineWidth / 2, 0, getRads(360)); // 画圈
        ctx.fill(); // 填色

        ctx.beginPath(); // 开始绘制弧线
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = colors[i]; // 设置描边颜色
        ctx.arc(0, 0, _r, startPoint, endPoint); // 画弧
        ctx.stroke(); // 绘制

        ctx.beginPath(); // 开始绘制结束点
        const _x = Math.cos(endPoint) * _r; // 确定x轴坐标
        const _y = Math.sin(endPoint) * _r; // 确定y轴坐标
        ctx.lineWidth = 0;
        ctx.arc(_x, _y, lineWidth / 2, 0, getRads(360)); // 画圈
        ctx.fill(); // 填色

        ctx.restore(); // 重置状态, 回溯save点状态
      });
    };
    return (
      <View style={{ alignItems: 'center' }}>
        <View style={{ width: canvasSize, marginVertical: 20 }}>
          <Canvas
            ref={handleCanvasBg}
            style={{
              backgroundColor: '#fff'
            }}
          />
          <Canvas
            ref={dataArc}
            style={{
              position: 'absolute',
              left: 0,
              top: 0,
            }}
          />
          <View
            style={{
              position: 'absolute',
              left: 0,
              top: 0,
              height: canvasSize,
              width: canvasSize,
              backgroundColor: 'rgba(255,255,255,0.1)'
            }}
          />
        </View>
        <ChartInfo data={data} colors={colors} />
      </View>
    );
  }
}
